<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta charset="utf-8"/>

		<title>Google 3D Tiles Example</title>

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			html {
				overflow: hidden;
				font-family: Arial, Helvetica, sans-serif;
				user-select: none;
			}

			canvas {
				image-rendering: pixelated;
				outline: none;
			}

			#info {
				position: absolute;
				top: 0;
				left: 0;
				color: white;
				width: 100%;
				text-align: center;
				padding: 5px;
				pointer-events: none;
				line-height: 1.5em;
			}

			#info a {
				color: white;
				pointer-events: all;
			}

			#credits {
				position: absolute;
				bottom: 0;
				left: 0;
				color: white;
				font-size: 12px;
				opacity: 0.5;
				padding: 5px;
				line-height: 1.25em;
			}
        </style>
    </head>
    <body>
		<div id="info">
			<div>
				Example using <a href="https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles">Googles Photorealistic 3D Tiles</a> - Tokyo Tower
				<br/>
				Google Cloud Tiles API key required
			</div>
		</div>
		<div id="credits">
		</div>
        <script type="module" src="./googleMapsAerial.js"></script>
    </body>
</html>
